<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <h1>111</h1>
        <!-- p -->
        <h2>222</h2>
    </div>

    <ul>

    </ul>

    <script>

        // innerText  读取或者赋值内容 --- 不会解析标签
        // innerHTML  读取或者赋值内容 --- 可以解析标签



        // 创建标签对象   document.createElement('标签的名字')
        // 添加子元素
        //     在后面添加  appendChild()
        //     在指定的子元素的前面添加  insertBefore(new , old)






        var oDiv = document.querySelector('div');
        // oDiv.innerHTML = '<p>通过字符串加进去的</p>';
        // oDiv.innerText = '<p>通过字符串加进去的</p>';



        // 1 创建一个p标签对象
        var oP = document.createElement('p');
        console.log(oP);
        // 给p添加内容
        // var text = document.createTextNode('我是给p标签的内容');
        // oP.appendChild(text);
        oP.innerHTML = '我是给p标签的内容';

        // 2 把p标签插入到div中去
        oDiv.appendChild(oP);


        var oH2 = document.querySelector('h2');
        oDiv.insertBefore(oP, oH2);






        var oUl = document.querySelector('ul');


        // 文档碎片
        var fragment = document.createDocumentFragment();

        // 需要生出100个Li
        for (var i = 1; i <= 100; i++) {
            var oLi = document.createElement('li');
            oLi.innerHTML = i;
            fragment.appendChild(oLi);
        }

        oUl.appendChild(fragment);




    </script>

</body>

</html>